<template>
	<view class="share-modal" :class="[showModal ? 'modal-show':'']">
		<view class="share-wrap" :class="[showModal ? 'share-wrap-show':'']">
			<view class="title">立即分享好友</view>
			<view class="share-icon-wrap">
				<button class="share-item" open-type="share" hover-class="none">
					<image src='/static/share-friend.png'></image>
					<view class="text">分享好友</view>
				</button>
				<view class="share-item" @tap='toShare'>
					<image src='/static/share-poster.png'></image>
					<view class="text">生成海报</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="cancel line-center" @tap='close'>取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"share-popup",
		props:{
			showModal:Boolean
		},
		data() {
			return {
				
			};
		},
		methods:{
			close(){
				this.$emit('close')
			},
			toShare(){
				this.$emit('toShare')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share-modal{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 222;
		opacity: 0;
		visibility: hidden;
		transition: all 0.1s ease-in-out;
	}
	.modal-show{
		opacity: 1;
		visibility: visible;
	}
	.share-wrap{
		width: 100%;
		height: 460rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		font-size: 26rpx;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}
	.share-wrap-show {
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}
	.title{
		padding:24rpx 0;
		text-align: center;
		border-bottom: 2rpx solid #FAFAFA;
	}
	.share-icon-wrap{
		width: 100%;
		box-sizing: border-box;
		padding:80rpx 120rpx 50rpx;
		display: flex;
		justify-content: space-around;
		.share-item{
			margin-left: inherit;
			margin-right: inherit;
			image{
				width: 72rpx;
				height: 72rpx;
				display: block;
				margin:auto;
			}
			.text{
				text-align: center;
				padding-top:20rpx;
			}
		}
	}
	.line{
		width: 100%;
		height: 14rpx;
		background: #FAFAFA;
	}
	.cancel{
		width: 100%;
		height: 80rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

</style>